<template>
	<view class="">
		<view :style="[bodyStyle]">
			<view class="bg-white overflow-hidd" :style="[boxStyle]">
				<view class="e-p-36 e-flex" @tap="popupShow = true" v-if="serveText">
					<text class=" e-m-r-44 c-34">{{ $t('classify.服务') }}</text>
					<view class="e-flex-1 ">{{ serveText }}</view>
					<image class="img-36" :src="$staticPath('layout/basics/right_arrow.png')"></image>
				</view>
				<view class="e-p-36 e-flex" @tap="$emit('selectSku')">
					<text class=" e-m-r-44 c-34">{{ $t('classify.规格') }}</text>
					<view class="e-flex-1  ">{{ checkInfo.skuSpec || $t('classify.请选择规格与数量') }}</view>
					<image class="img-36" :src="$staticPath('layout/basics/right_arrow.png')"></image>
				</view>
				<!-- 服务弹窗 -->
				<ServePopup :info="info" :show="popupShow" @close="popupShow = false"></ServePopup>
			</view>
			<view class="e-m-t-20 bg-white e-flex e-p-36" style="align-items: flex-start;" v-if="info.deliveryRemark">
				<text class="e-font-28 e-m-r-44">{{$t('classify.配送')}}</text>
				<view class="e-font-28 e-flex-1">
					{{info.deliveryRemark}}
				</view>
			</view>
		</view>

	</view>

</template>

<script lang="ts" setup>
	import { ref, computed } from 'vue'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import { useLayoutCompoments } from '@/components/list/hooks'
	import type {GoodsSkuSpecificationItem} from '@/common/request/api'
	import type { GoodsInfo } from '../type'
	import ServePopup from './servePopup.vue'


	const props = withDefaults(defineProps<{
		info : GoodsInfo
		checkInfo : GoodsSkuSpecificationItem,
		option : {
			//样式风格
			styleType : 0 | 1 | 2
			// 边距
			paddingTop : number
			paddingBottom : number
			paddingX : number
			// 圆角
			radiusTop : number
			radiusBottom : number
		}
	}>(), {
		option: () => ({
			styleType: 0,
			paddingTop: 0,
			paddingBottom: 0,
			paddingX: 0,
			radiusTop: 0,
			radiusBottom: 0,

		})
	})

	const ctx = useCurrentInstance()

	const { viewStyle: bodyStyle, bodyBoxStyle: boxStyle } = useLayoutCompoments(ctx, props.option)

	const popupShow = ref(false)

	const serveText = computed(() => {
		if (props.info.productRightsInterests) {
			return props.info.productRightsInterests.map(item => item.name).join('·')
		} else {
			return ''
		}
	})
</script>
<style lang="scss">
	@import '@/components/list/css/layoutCommon.scss';
</style>
<style lang="scss" scoped>
	.c-34 {
		color: #343434;
	}
</style>